<template>
  <div class="railing">
    <div class="gou">
      <div>你的消息</div>
      <img src="~assets/img/profile/information.svg" alt="" />
    </div>

    <div class="rail_item">
      <div class="coupon">
        <div class="text">卡券红包</div>
        <div class="item">6张活动券 ></div>
      </div>
      <div class="sybsidy">
        <div class="text">补贴保障</div>
        <div class="item">退货补运费 ></div>
      </div>
      <div class="wallet">
        <div class="text">我的钱包</div>
        <div class="item">查看白付美 ></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Railing",
};
</script>

<style scoped>
.railing {
  width: 96%;
  height: 24vh;
  margin-left: 2%;
  display: flex;
  font-size: 17px;
  margin-bottom: 2%;
  background: url("../../../assets/img/regisetr/login2.jpg");
  background-size: cover;
}

.gou,
.rail_item {
  width: 49%;
  height: 100%;
  background: url("../../../assets/img/regisetr/login2.jpg");

  border-radius: 10%;
  overflow: hidden;
  font-weight: bold;
}

.gou {
  color: #000;
  border: 3px solid seashell;
}

.gou div {
  margin-left: 12%;
  margin-top: 10%;
}

.gou img {
  width: 90%;
  margin-left: 20%;
}

.rail_item {
  margin-left: 2%;
}

.rail_item .coupon,
.sybsidy,
.wallet {
  height: 33%;
  background: url("../../../assets/img/regisetr/login2.jpg");

  border-bottom: 2px solid #f9f9f6;
  border-radius: 10%;
  display: flex;
  color: #000;
  border-top: 3px solid seashell;
}

.text,
.item {
  flex: 1;
  line-height: 50px;
}

.text {
  text-align: center;
}

.item {
  font-size: 9px;
  text-align: right;
  color: #8d8d8d;
}
</style>
